<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 合并就删除 -->
    <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link
      rel="stylesheet"
      href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../src/font/font_shy/iconfont.css" />
    <title>角色管理</title>
    
    <link rel="stylesheet" href="../../css/sysmgmt(系统管理-角色管理).css" />
    <link rel="stylesheet" href="../../css/disease.css">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-3">
          <button
            type="button"
            class="addBtn btn btn-primary"
            data-toggle="modal"
            data-target="#myAddModal"
          >
            +新增角色
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <table>
            <tbody id="tbodyRoleList">
              <!-- 删除选择框 -->
              <div
                class="delMode modal fade"
                id="myDelModal"
                tabindex="-1"
                role="dialog"
                aria-labelledby="myModalLabel"
              >
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                      >
                        <span aria-hidden="true">&times;</span>
                      </button>
                      <h4 class="modal-title" id="myModalLabel">删除对话框</h4>
                    </div>
                    <div class="modal-body">
                      <p>确定要删除这行数据吗?</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="quxiaoshanchu btn btn-default" data-dismiss="modal" >
                        返回
                      </button>
                      <button
                        type="button"
                        class="quedingshanchu btn btn-default"
                        data-dismiss="modal" style="margin-bottom: 10px;"
                      >
                        确定
                      </button>
                      <!-- 本身没有data-dismiss="modal" -->
                    </div>
                  </div>
                </div>
              </div>
              <tr>
                <th>ID</th>
                <th>身份名称</th>
                <th>创建时间</th>
                <th>启用状态</th>
                <th>操作</th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="pageBox col-lg-offset-4 col-lg-8">
          <!-- pageBox1:共多少页,选一页多少条 -->
          <div class="pageBox1 col-lg-4 col-md-4 col-sm-4">
            <span>共</span>
            <!-- pageBox1-1共多少条 -->
            <span></span>
            <span>条</span>
            <!-- pageBox1-2选一页多少条 -->
            <select class="pageBox1-2 form-control" onchange="PageBox12(this)">
              <option value="5" onclick="pageBox12a(this)">5条/页</option>
              <option value="10" onclick="pageBox12a(this)">10条/页</option>
            </select>
          </div>
          <!-- pageBox2:页码 -->
          <div class="pageBox2 col-lg-4 col-md-4 col-sm-4">
            <!-- 上一页prePage -->
            <span class="prePage iconfont icon-xiangzuo"></span>
            <!-- 页码集 -->
            <div class="pageDiv"></div>
            <!-- 下一页nextPage -->
            <span class="nextPage iconfont icon-xiangyou"></span>
          </div>
          <!-- pageBox3:前往+跳转 -->
          <div class="pageBox3 col-lg-4 col-md-4 col-sm-4">
            <span>前往</span>
            <div class="col-sm-5">
              <!-- 跳转输入框pageBox3-1 -->
              <input
                type="text"
                class="form-control"
                id="pageBox3-1"
                placeholder="1"
              />
            </div>
            <span>页</span>
            <!-- 页面跳转按钮pageBox3-1Btn -->
            <span class="pageBox3-1Btn">&nbsp;跳转</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增模态框 -->
    <!-- 新增模态框增加class=addMode -->
    <div id="myAddModal" class="addMode modal fade bs-example-modal-lg in" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <h3 style="margin-left: 30px">添加角色</h3>
          <hr />
          <div>
            <form class="form-horizontal">
              <div class="form-group">
                <label for="addName" class="col-sm-2 control-label">身份名称</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="addName" placeholder="身份名称" />
                </div>
              </div>
              <div class="qiyongzhuangtai form-group">
                <label for="#" class="col-sm-2 control-label">启用状态</label>
                <div class="qiyongzhuangtai col-sm-9">
                  <label class="huise" ><input name="qiyongzhuangtai1" value="0" type="radio" />启用</label >
                  <label class="huise" ><input name="qiyongzhuangtai1" value="1" type="radio" />禁用</label >
                </div>
              </div>
              <div class="form-group">
                <label for="#" class="col-sm-2 control-label">权限</label>
                <div class="huise col-sm-9">
                  <div>
                    <label ><input id="checkall1" value="0" type="checkbox" />首页</label ><br />
                    <label >&nbsp;&nbsp;&nbsp;&nbsp;<input name="shouye" value="1" type="checkbox" />首页统计数据</label ><br />
                    <label >&nbsp;&nbsp;&nbsp;&nbsp;<input name="shouye" value="2" type="checkbox" />首页统计图表1</label ><br />
                    <label >&nbsp;&nbsp;&nbsp;&nbsp;<input name="shouye" value="3" type="checkbox" />首页统计图表2</label ><br />
                  </div>
                  <div>
                    <label><input value="4" type="checkbox" />其他页1</label>
                  </div>
                  <div>
                    <label><input value="5" type="checkbox" />其他页2</label>
                  </div>
                  <div>
                    <label ><input id="checkall2" value="6" type="checkbox" />其他页3</label ><br />
                    <label >&nbsp;&nbsp;&nbsp;&nbsp;<inpu name="qitaye3" value="7" type="checkbox" />页面功能1</label ><br />
                    <label >&nbsp;&nbsp;&nbsp;&nbsp;<input name="qitaye3" value="8" type="checkbox" />页面功能2</label ><br />
                    <label >&nbsp;&nbsp;&nbsp;&nbsp;<input name="qitaye3" value="9" type="checkbox" />页面功能3</label ><br />
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-8 col-sm-4">
                  <!-- 保存的按钮的-------1.新增时变addSave  2.修改时变revSave -->
                  <button type="button" class="quedingadd btn btn-default" data-dismiss="modal">
                    保存
                  </button>
                  <button type="button" class="quxiaoadd btn btn-default" data-dismiss="modal"
                  >
                    返回
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑模态框 -->
    <div class="editMode modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <h3 style="margin-left: 30px">编辑疾病</h3>
            <hr/>
            <div>
              <form class="clear form-horizontal">
                <div class="form-group">
                  <label for="jsid" class="col-sm-2 control-label">角色ID:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="jsid" placeholder="" disabled="disabled"/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="sfmc" class="col-sm-2 control-label">身份名称:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="sfmc" placeholder="" />
                  </div>
                </div>
                <hr>
                  <div style="float: right;">
                    <button type="button" class="quxiaoedit btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="quedingedit btn btn-default" data-dismiss="modal">保存</button>
                  </div>
              </form>
            </div>
          </div>
      </div>
  </div>

    <script>
      // 角色
      //   let a=5

      let roleList = [
        {
          id: 1,
          status: "超级管理员",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 2,
          status: "主治医生",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 3,
          status: "医生",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 4,
          status: "药师",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 5,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 6,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 7,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 8,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 9,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 10,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 11,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 12,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 13,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 14,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 15,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 16,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 17,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 18,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 19,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 20,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 21,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 22,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 23,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 24,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 25,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 26,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 27,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 28,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 29,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 30,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 31,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 32,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 33,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 34,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 35,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 36,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 37,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 38,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 39,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 40,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 41,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 42,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 43,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 44,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 45,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 46,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 47,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 48,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 49,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
        {
          id: 50,
          status: "客服",
          createTime: "2022-10-10 12:00:00",
          enabled: 1,
        },
      ];
      let dangqianyeData = [];
      let dangqianyePage = 1; //当前是多少页
      let a = parseInt($(".pageBox1-2 option:selected").val());
      let maxPage = Math.ceil(roleList.length / a); //pagediv做了之后放进去
      $(".addBtn").click(function () {
        $(this).css({ backgroundColor: "#555a5d" });
      });
      console.log(roleList);
      showData(roleList, 1, a);
      showPage(roleList);

      function showRoleList(data) {
        // console.log("现在是第" + dangqianyePage + "页");
        // console.log("最大页是" + maxPage + "页");
        $(".trRoleList").html("");
        for (let i = 0; i < data.length; i++) {
          $("#tbodyRoleList").append(`
                <tr class="trRoleList">
                    <td>${data[i].id}</td>
                    <td>${data[i].status}</td>
                    <td>${data[i].createTime}</td>
                    <td class="enabledRoleListBox"><div class="enabledRoleList1"><span>启用</span><div class="circle1" style=""></div></div></td>
                    <td>
                      <span class="editBtn" onclick='edit(${JSON.stringify(data[i])})' style="cursor: pointer;" type="button" data-toggle="modal"  data-target=".editMode">编辑</span>
                      <span class="delBtn" data-toggle="modal" data-target="#myDelModal" data-del='${JSON.stringify(data[i].id)}'>删除</span>
                    </td>
                </tr>
                `);
        }
      }
      //   禁止↓
      //   <td class="enabledRoleList2"><div><span>启用</span><div class="circle2" style=""></div></div></td>

      //   选择一页显示多少数据
      function PageBox12(thisObj) {
        a = parseInt($(".pageBox1-2 option:selected").val());
        console.log(a);
        showData(roleList, 1, a);
        showPage(roleList);
      }
      function showData(data, pageNum, aa) {
        let firstData = (pageNum - 1) * aa;
        dangqianyeData = data.slice(firstData, firstData + aa);
        console.log(firstData);
        showRoleList(dangqianyeData);
        // 点击页码的样式
        // 令当前页的页码改变
        dangqianyePage = pageNum;
      }

      // 上一页
      $(".prePage").click(function () {
        if (dangqianyePage > 1) {
          dangqianyePage -= 1;
          showData(roleList, dangqianyePage, a);
          showPage(roleList);
        }
      });
      $(".nextPage").click(function () {
        maxPage = Math.ceil(roleList.length / a)
        if (dangqianyePage < maxPage) {
          dangqianyePage += 1;
          showData(roleList, dangqianyePage, a);
          showPage(roleList);
        }
      });
      //   页码
      function showPage(data) {
        let zuoPage = dangqianyePage;
        let eqPage = (dangqianyePage % a) - 1;
        $(".page").eq(eqPage).addClass("active");
        $(".page").eq(eqPage).siblings().removeClass("active");
        if (zuoPage == 1 || zuoPage % a == 1) {
          $(".pageDiv").html("");
          for (let i = zuoPage; i <= zuoPage + 4; i++) {
            $(".pageDiv").append(`<div class="page">${i}<div>`);
          }
          $(".page").eq(0).addClass("active");
          $(".page").eq(0).siblings().removeClass("active");
        }
      }
      $(".page").click(function () {
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        dangqianyePage = parseInt($(this).text());
        showData(roleList, dangqianyePage, a);
        showPage(roleList)
      });

      //   滑动按钮
      $(".enabledRoleList1").click(function () {
        $(this)
          .unbind("click")
          .click(function () {
            alert("111");
          });
        $(this).addClass("enabledRoleList2").removeClass("enabledRoleList1");
        $(this).children().eq(1).addClass("circle2").removeClass("circle1");
      });
      $(".enabledRoleList2").click(function () {
        $(this).addClass("enabledRoleList1").removeClass("enabledRoleList2");
        $(this).children().eq(1).addClass("circle1").removeClass("circle2");
        $(this)
          .unbind("click")
          .click(function () {
            alert("222");
          });
      });

      $(".pageBox1").children().eq(1).append(`${roleList.length}`);
      // $('.pageBox1').children().first().add('<span>${roleList.length}</span>')

      // 输入页面跳转
      $(".pageBox3-1Btn").click(function () {
        let shuruyema = $("#pageBox3-1").val();
        dangqianyePage = shuruyema;
        showData(roleList, dangqianyePage, a);
      });

      // 删除
      function delData(delid) {
        console.log(delid);
        console.log(dangqianyePage);
        for (let i = 0; i < roleList.length; i++) {
          if (roleList[i].id == delid) {
            console.log(delid); //到这里没问题
            roleList.splice(i, 1);
          }
        }
        console.log(roleList);
        // 渲染页码
        showPage(roleList);
        showData(roleList, dangqianyePage, a);
      }

      $("#tbodyRoleList").on("click", ".delBtn", function () {
        let id = $(this).attr("data-del");
        console.log(id);
        $(".quedingshanchu").click(function () {
          delData(id);
        });
      });
      // 全选
      $("#checkall1").click(function () {
        if (this.checked) {
          $("input[name='shouye']").each(function () {
            this.checked = true;
            $(this).parent().siblings().css({ color: "#000" });
          });
        } else {
          $("input[name='shouye']").each(function () {
            this.checked = false;
            $(this)
              .parent()
              .siblings()
              .css({ color: "rgba(215, 215, 215, 1)" });
          });
        }
      });
      $("#checkall2").click(function () {
        if (this.checked) {
          $("input[name='qitaye3']").each(function () {
            this.checked = true;
            $(this).parent().siblings().css({ color: "#000" });
          });
        } else {
          $("input[name='qitaye3']").each(function () {
            this.checked = false;
            $(this)
              .parent()
              .siblings()
              .css({ color: "rgba(215, 215, 215, 1)" });
          });
        }
      });
      $("input").click(function () {
        // $(this).parent().css({color:'#000'})
        if (this.checked) {
          $(this).parent().css({ color: "#000" });
        } else {
          $(this).parent().css({ color: "rgba(215, 215, 215, 1)" });
        }
      });
      // 编辑
      function edit(editData){
        $('.editMode #jsid').val(editData.id)
        $('.editMode #sfmc').val(editData.status)
      }
      $('.quedingedit').click(function () {
        let editjsid=$('.editMode #jsid').val()
        let editsfmc=$('.editMode #sfmc').val()
        let editContent={
          id:editjsid,
          status:editsfmc
        }
        for(let i = 0;i<roleList.length;i++){
        if(editContent.id==roleList[i].id){
          roleList[i].status = editContent.status
        }
      }
      showData(roleList,dangqianyePage,a)
      showPage(roleList)
      })
    </script>
  </body>
</html>
